import { useContext, useEffect, useState } from 'react'
import GlobalContext from './GlobalContext'
import '../assets/top.css'
import { Progress } from 'antd'
import Middle from './Middle'

const { setTopData, conicColors, progressSize, items, active, activeShadow, inactive } = window.api.top

function Top() {
  const { t } = useContext(GlobalContext)
  const [topInfo, setTopInfo] = useState([])
  const [clickedItemIdx, setClickedItemIdx] = useState(0)
  const [batteryInf, setBatteryInf] = useState({})
  const [data, setData] = useState(null)
  const [items_, setItems] = useState([])

  useEffect(() => {
    setTopData(setData, setBatteryInf, setTopInfo, setItems, t)
  }, [])

  return (
    <GlobalContext.Consumer>
      {(ctx) => {
        return (
          <>
            <div className="top-container">
              <div className="container-item">
                {batteryInf &&
                  items(batteryInf, ctx.t).map((item, index) => {
                    return (
                      <div
                        className="item"
                        key={index}
                        style={index === clickedItemIdx ? activeShadow : {}}
                        onClick={() => setClickedItemIdx(index)}
                      >
                        <Progress
                          type={'circle'}
                          percent={topInfo[index]}
                          size={progressSize}
                          strokeColor={conicColors}
                          format={(percent) => (
                            <span
                              style={{
                                color: 'white',
                                fontSize: '12px'
                              }}
                            >
                              {percent}%
                            </span>
                          )}
                        />
                        <div style={index === clickedItemIdx ? active : inactive}>{item.title}</div>
                      </div>
                    )
                  })}
              </div>
            </div>
            <Middle clickedItemIdx={clickedItemIdx} data={{ ...data }} />
          </>
        )
      }}
    </GlobalContext.Consumer>
  )
}

export default Top
